<template>
  <div class="equipment-right">
    <div class="right-top">
      <el-date-picker
      v-model="value1"
      :clearable="false"
      @change="timeChange"
      range-separator="-"
      type="daterange">
    </el-date-picker></div>
    <div class="chart-box-con">
      <div class="chart-con">
        <div class="title">作业情况</div>
        <div class="type-select">
          <div class="btn-list">
            <div v-for="(val, i) in btnList"
                 :key="i"
                 :class="['btn-item' , val.type === current1 ? 'active' : '']"
                 @click="current1 = val.type"
            >{{val.name}}</div>
          </div>
          <div class="chart-legend">
            <span>实际作业量</span>
            <span>正常作业能力</span>
          </div>
        </div>
        <div class="chart" ref="barChart">chart区域</div>
      </div>
      <div class="chart-con">
        <div class="title">设备利用率</div>
        <div class="type-select">
          <div class="btn-list">
            <div v-for="(val, i) in btnList"
                 :key="i"
                 :class="['btn-item' , val.type === current2 ? 'active' : '']"
                 @click="current1 = val.type"
            >{{val.name}}</div>
          </div>
        </div>
        <div class="chart" ref="lineChart">chart区域</div>
      </div>
      <div class="chart-con time-line-box">
        <div class="title">设备预警</div>
        <el-timeline class="time-line-con">
          <el-timeline-item timestamp="2018/4/12" placement="top" color="#46BFEA">
              <div class="info">王小虎 提交于 2018/4/12 20:46</div>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/12" placement="top" color="#46BFEA">
            <div class="info">王小虎 提交于 2018/4/12 20:46</div>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/12" placement="top" color="#46BFEA">
            <div class="info">王小虎 提交于 2018/4/12 20:46王小虎 提交于 2018/4/12 20:46王小虎 提交于 2018/4/12 20:46</div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts"
import {fontSizeFn} from "../hooks/index.js"
export default {
  name: "equipmentRight",
  data () {
    return {
      value1: ['2024-11-01', '2024-11-23'],
      btnList: [
        {
          name: '箱',
          type: 'all'
        },
        {
          name: '吨',
          type: 'normal'
        },
        {
          name: '件',
          type: 'abnormal'
        },
        {
          name: '小时',
          type: 'alsal'
        },
        {
          name: '次',
          type: 'alassal'
        }
      ],
      current1: 'all',
      current2: 'all'
    }
  },
  mounted () {
    this.initEcharts1()
    this.initEcharts2()
  },
  methods: {
    timeChange (val) {
      console.log(val)
    },
    initEcharts1 () {
      let chart = echarts.init(this.$refs.barChart);
      let option = {
        grid: {
          left: '0%',
          right: '5%',
          top: '7%',
          bottom: '9%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer:{
            type:'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Wed', 'Thu', 'Fri', 'Sat',],
          axisLabel: {
            color: '#fff',
            fontSize: fontSizeFn(12),
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: fontSizeFn(12),
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
              color: '#46BFEA',
              barBorderRadius: 12,
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      chart.setOption(option);
      window.addEventListener('resize', ()=>{
        chart.resize();
      })

    },
    initEcharts2 () {
      let chart = echarts.init(this.$refs.lineChart);
      let option = {
        grid: {
          left: '0%',
          right: '5%',
          top: '7%',
          bottom: '9%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer:{
            type:'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
          axisLabel: {
            color: '#fff',
            fontSize: fontSizeFn(12),

          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            formatter: "{value} %",
            fontSize: fontSizeFn(12),

          },
          max:100
        },
        series: [
          { name:"利用率",
            data: [50, 45, 66, 80, 70, 13],
            type: 'line',
            lineStyle: {
              color: '#46BFEA',
              width: 2
            },

          }
        ],
      }
      chart.setOption(option);
      window.addEventListener('resize', ()=>{
        chart.resize();
      })
    }
  }
}
</script>
<style scoped lang="scss">
$root-font-size: 106.6px;
@function px-to-rem($px) {
  @return ($px / $root-font-size) * 1rem;
}
.equipment-right{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .right-top{
    height: px-to-rem(40px);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: px-to-rem(10px);
    color: red;
    /deep/.el-date-editor--daterange{
      width: px-to-rem(220px);
      height: px-to-rem(30px);
      display: flex;
      justify-content: center;
      .el-range__icon,.el-range__close-icon{
        display: none;
      }
      .el-range-separator{
        color: #fff;
        height: auto;
      }
    }
    /deep/.el-input__inner {
      border: none;
      background-color:rgba(255, 255, 255, .25);
    }
    /deep/.el-range-input{
      color: #fff;
      background-color:transparent;
    }
  }
  .chart-box-con{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    >div{
      flex: 1;
      color: #fff;
      padding: px-to-rem(18px)  px-to-rem(40px) 0;
      background: url("../images/card-border.png") no-repeat;
      background-size: 100% 100%;
      overflow: hidden;

      .title{
        height: px-to-rem(30px);
        font-weight: bold;
        background: url("../images/tit-bg.png") no-repeat;
        background-size: 90% 95%;
        font-size: px-to-rem(13px);
      }
      .type-select{
        display: flex;
        justify-content: space-between;
        font-size: px-to-rem(13px);
        margin: px-to-rem(5px) 0;
        .btn-list{
          width: 50%;
          display: flex;
          .btn-item{
            width: px-to-rem(80px);
            height: px-to-rem(20px);
            line-height: px-to-rem(20px);
            text-align: center;
            background: #5c5c5c;
            color: #fff;
            cursor: pointer;
            &.active{
              color: #46BFEA;
              background: rgba(70, 191, 234, 0.35);
            }
          }
        }
        .chart-legend{
          display: flex;
          gap: px-to-rem(15px);
          align-items: center;
          >span{
            position: relative;
          }
          >span:nth-child(1):before{
            position: absolute;
            content: "";
            width: px-to-rem(4px);
            height: px-to-rem(4px);
            border-radius: 50%;
            background: #46BFEA;
            top: px-to-rem(8px);
            left: px-to-rem(-10px);
          }
          >span:nth-child(2):before{
            position: absolute;
            content: "";
            width: px-to-rem(4px);
            height: px-to-rem(4px);
            border-radius: 50%;
            background: #BBBBBB;
            top: px-to-rem(8px);
            left: px-to-rem(-10px);
          }
        }
      }
    }
    .chart-con{
      display: flex;
      flex-direction: column;
      .chart{
        flex: 1;
        font-size: px-to-rem(16px);
      }
    }
    .time-line-box{
      overflow: hidden;
      box-sizing: border-box;
      padding-bottom: px-to-rem(15px);
      //padding: px-to-rem(15px) 0;
      .time-line-con{
        flex: 1;
        overflow: auto;
        box-sizing: border-box;
        padding-top: px-to-rem(10px);
        padding-left: px-to-rem(10px);
        &::-webkit-scrollbar {
          display: none; /* 对于 Chrome, Safari 和 Opera 隐藏滚动条 */
        }
        /deep/.el-timeline-item__timestamp{
          color:#fff;
          font-size: px-to-rem(13px);
        }
        /deep/.el-timeline-item{
          padding-bottom: px-to-rem(10px);
        }
        /deep/.el-timeline-item__tail{
          border-left:2px dashed rgba(70, 191, 234, 0.5);
        }
        .info{
          font-size: px-to-rem(13px);
          line-height: px-to-rem(25px);
          padding: 0 px-to-rem(10px);
          background: rgba(255, 255, 255, 0.35);
          border-radius: 5px;
          color: #fff;
        }
      }
    }
  }
}
</style>